<template>
	<view class="_item_building">
		<view class="u-p-l-32 u-p-r-32 ">
			<view class="u-flex u-flex-between u-flex-items-center">
				<view class="f-s-16 f-w-b u-m-r-40 u-line-1">{{data.areaName}}</view>
				<view class="inde">
					<up-icon name="map-fill" color="#7f7f7f" :size="14"></up-icon>
					<view class="posSty"> {{data.address}}</view>
				</view>

				<!-- <up-icon name="arrow-right" color="#1677FF" :size="18"></up-icon> -->
				<!-- <status-tag :status="info.status"></status-tag> -->
			</view>

			<!-- <view class=" infoCardFu"> -->
			<view class="u-flex infoCard">
				<view class="car2">
					<view class="titSty">
						大厦楼层
					</view>
					<view class="titSty1" style="margin-top: -30rpx;">
						{{data.floors}} 层
					</view>
					<view class="xoe"></view>

				</view>

				<view class="car1">
          <view class="titSty">
            入住企业
          </view>
          <view class="titSty1">
            {{data.isPoliceAuthTotal+data.isNotPoliceAuthTotal}} 家
          </view>

          <view class="secItem">
            <view class="min">
             <view class="titStyMin">
               已认证：
             </view>
              <view class="titStyBlc">
                {{data.isPoliceAuthTotal}}
              </view>
            </view>

            <view class="min">
              <view class="titStyMin">
                未认证：
              </view>
              <view class="titStyBlc">
                {{data.isNotPoliceAuthTotal}}
              </view>
            </view>
          </view>
				</view>


				<view class="car1">
					<view class="titSty">
						在职员工
					</view>
					<view class="titSty1">
						{{data.isPoliceAuthUserTotal+data.isNotPoliceAuthUserTotal}} 人
					</view>


          <view class="secItem">
            <view class="min">
              <view class="titStyMin">
                已认证：
              </view>
              <view class="titStyBlc">
                {{data.isPoliceAuthUserTotal}}
              </view>
            </view>

            <view class="min">
              <view class="titStyMin">
                未认证：
              </view>
              <view class="titStyBlc">
                {{data.isNotPoliceAuthUserTotal}}
              </view>
            </view>
          </view>


				</view>
			</view>
			<!-- </view> -->


		</view>
		<up-line margin="24rpx 0 "></up-line>
		<view class="u-flex u-flex-end u-flex-items-center u-p-l-32 u-p-r-32">
			<view style="display: flex;width: 380rpx;justify-content: space-between;">
				<up-button text="楼宇详情" :customStyle="{
					width: '150rpx',
					height: '56rpx',
					background: '#fff',
					borderRadius: '8rpx',
					fontSize: '28rpx',
					color: '#000000'
				}" @click="toBuildingData"></up-button>
				
				
				<up-button text="单位管理" :customStyle="{
					width: '150rpx',
					height: '56rpx',
					background: '#1677FF',
					borderRadius: '8rpx',
					fontSize: '28rpx',
					color: '#FFFFFF'
				}" @click="toBuildingInfo"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
const toBuildingInfo = ()=>{
  // console.log('4444444444')
  // console.log(props.data)
  uni.navigateTo({
    url: '/subPackages/company/list?id='+props.data.areaID+'&name='+props.data.areaName,
  })
}
const props = defineProps({
  data: Object,
})
const toBuildingData = ()=>{
  uni.navigateTo({
    url: '/subPackages/building/info?id='+props.data.id+'&name='+props.data.areaName,
  })
}
	// export default {
	// 	name: "BuidingItem",
	// 	data() {
	// 		return {
  //
	// 		};
	// 	}
	// }
</script>

<style lang="scss" scoped>

.secItem{
  display: flex;
  flex-direction: column;
  .min{
    display: flex;
    //flex-direction: column;
    .titStyMin {
      color: gray;
      text-align: center;
      font-size: 20rpx;
    }
    .titStyBlc {
      color: black;
      text-align: center;
      font-size: 22rpx;
    }
  }
}


	._item_building {

		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		padding: 32rpx 0;
		margin-bottom: 24rpx;

		._title {
			min-width: 144rpx;
			width: 144rpx;
		}

	}

	.posSty {
		color: #7f7f7f;
		display: flex;
		font-size: 24rpx;
		margin-left: 5rpx;
	}

	.infoCard {
		 //padding: rpx;
		// width: 620rpx;
		margin-top: 20rpx;
		background-color: #f5f5f5;
		height: auto;
		display: flex;
		// margin-left: 32rpx;
	}

	.titSty {
		color: gray;
		text-align: center;
		font-size: 28rpx;
	}

	.titSty1 {
		font-size: 28rpx;
		color: #111;
		text-align: center;
	}

	.car1 {
				flex:1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx;

	}
	.car2 {
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx;
			// border-right: 1rpx solid #7f7f7f;
	}
	.xoe{
		// position: absolute;
		border-right: 1rpx solid #adadad;
        margin-top: -105rpx;
		right: 0;
		height: 70rpx;
		width: 120%;
	}
	.inde{
		display: flex;
		flex-direction: row;
	}
</style>
